SPA - Single Page Application 單頁應用程式網頁,就是透過 Router 技術達成的,最經典的例子就是 Gmail
。
在 Angular 10 的 CLI 創建中一開始已經可以選擇是否建立 router 模組,所以建置好後會得到一個 app-routing.module.ts
檔案。
打開會看到預設建置完成的樣子。
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
const routes: Routes = []; // 主要寫其他路由的地方
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
透過指令 ng g c home
跟 ng g c second
,建立成功後要設定路徑,
<h1>Angular Router</h1>
<hr />
<ul>
<li><a [routerLink]="['/home']">home</a></li>
<li><a [routerLink]="[ '/second']">second</a></li>
</ul>
<router-outlet></router-outlet>
設定兩個連結,並且指向指定頁面,最後要加上 <router-outlet>
來存放路由,到此已經把基本路由的方式寫完了,接著要把路由建立起來。
要將路由設定寫在這個陣列中,並用物件呈現。
const routes: Routes = [];
在建立 component 的過程中, Angular 已經自動將新增的兩個元件加入到 app.module.ts 的元件中,所以就不需做任何的設定,只要專心設定路由就可以了。
路由設定有兩組基本的屬性與值,一個是 path 路徑,另一個是要連結的元件。
const routes: Routes = [
{
path: "home",
component: HomeComponent,
},
{
path: "second",
component: SecondComponent,
},
];
完整路由程式碼
// 官方元件
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
// 自動新增自訂元件
import { HomeComponent } from "./home/home.component";
import { SecondComponent } from "./second/second.component";
const routes: Routes = [
{
path: "home",
component: HomeComponent,
},
{
path: "second",
component: SecondComponent,
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
const routes: Routes = [
{
path: "",
redirectTo: "/home",
pathMatch: "full", // 當路徑是空的時候轉址到 home
},
{
path: "home",
component: HomeComponent,
},
{
path: "second",
component: SecondComponent,
},
{
path: "**",
component: HomeComponent, // 萬用路徑,路由沒有比對到,永遠會執行
},
];
這是路由比較進階的作法,就是在原本的路由下再建立更多的路由;也就是有些頁面下還會有其他子頁面。
設定指令如下:
ng g c home/home1
2.建立 HOME 元件下的 home1 頁面。
ng g c home/home2
輸入後就會在 home 資料夾中增加兩個子資料夾,分別為 home1,home2,裡面的元件也都會自動建立好。
接著在 home.component.html
中建立下方路由程式碼,因為 home1 跟 home2 是相依在 home 的下方,建立完路由後一樣要給予 <router-outlet>
這個標籤做接口。
<p>home works!</p>
<hr />
<ul>
<li><a [routerLink]="['/home/home1']">Home1</a></li>
<li><a [routerLink]="['/home/home2']">Home2</a></li>
</ul>
<router-outlet></router-outlet>
完成後來看到 home.component.ts
,我在 home1 建立了路由後,要在這邊加上子路由的設定,寫法跟路由很相似。
下方可以看到在 HomeComponent
後面直接加上一個 children 的陣列,裡面包著物件,這跟原本的路由設定概念相同,很重要的地方是子路由第一個 path
一定要寫,並給予空值,代表不管怎麼樣一定都會跑這行,不然後面的子路由會讀不到。
{
path: 'home',
component: HomeComponent,
children: [
{
path: '', // 一定要加這行
},
{
path: 'home1',
component: Home1Component,
},
{
path: 'home2',
component: Home2Component,
},
],
},
這樣在點擊 home,就會出現 home1 跟 home2,並且顯示其內容。
完整路由寫法:
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'home1',
component: Home1Component,
},
{
path: 'home2',
component: Home2Component,
},
],
},
{
path: 'second',
component: SecondComponent,
},
{
path: '**',
redirectTo: 'home',
pathMatch: 'full',
},
];